<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <title>jQuery.i18n.properties: Demo</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      
      	<!-- JS -->
      	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      	<script type="text/javascript" src="jquery.i18n.properties.js"></script>
      	
      	<!-- CSS -->
        <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
		<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">	
		<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
      	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
		
      
      <script type="text/javascript">
      	// load I18N bundles
		jQuery(document).ready(function() {
			loadBundles('pt_PT');
					
			// configure language combo box
			jQuery('#lang').change(function() {
				var selection = jQuery('#lang option:selected').val();
				loadBundles(selection != 'browser' ? selection : null);
				jQuery('#langBrowser').empty();
				if(selection == 'browser') {
					jQuery('#langBrowser').text('('+jQuery.i18n.browserLang()+')');
				}
			});
			
			// load files just for display purposes...
			jQuery('h4').each(function() {
				var file = 'bundle/' + jQuery(this).text();
				var code = jQuery(this).next().next('code');
				jQuery.get(file, function(data) {
					data = data.replace(/\n/mg, '<br/>');
					code.html(data);
				});
			});
			// ... and configure links to show/hide them
			jQuery('a.toggle').bind('click', function() {
				jQuery(this).next('code').slideToggle();
				return false;
			});
		});
		
		function loadBundles(lang) {
			jQuery.i18n.properties({
			    name:'Messages', 
			    path:'bundle/', 
			    mode:'both',
			    language:lang, 
			    callback: function() {
			        updateExamples();
			    }
			});
		}
		
		function updateExamples() {
			// Accessing values through the map
			var ex1 = 'msg_hello';
			var ex2 = 'msg_complex'; var ex2P = 'John';
			var ex3 = 'msg_url'; var ex3P = 'solution_1';
			var ex4 = 'inexistent_key';
			jQuery('#mapExamples')
				.empty()
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex1+'\')</code>  -->  '+jQuery.i18n.prop(ex1)+'</li>')
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex2+'\',[\''+ex2P+'\'])</code>  -->  '+jQuery.i18n.prop(ex2, [ex2P])+'</li>')
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex3+'\',[\''+ex3P+'\'])</code>  -->  '+jQuery.i18n.prop(ex3, [ex3P])+'</li>')
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex4+'\')</code>  -->  '+jQuery.i18n.prop(ex4)+'</li>');
		
			// Accessing values through a JS variable
			var ex21 = 'msg_hello';
			var ex22 = 'msg_world';
			var ex23 = 'msg_complex'; var ex23P = 'John';
			jQuery('#varExamples')
				.empty()
				.append('<li><code class="i18n">'+ex21+'</code>  -->  '+eval(ex21)+'</li>')
				.append('<li><code class="i18n">'+ex22+'</code>  -->  '+eval(ex22)+'</li>')
				.append('<li><code class="i18n">'+ex23+',(\''+ex23P+'\')</code>  -->  '+eval(ex23+'(\''+ex23P+'\')')+'</li>');
		}
      </script>
   </HEAD>
   
   <BODY>
      <h2>jQuery.i18n.properties :: Demo</h2>
      
      <h3>I18N Bundles</h3>
      <h4>Messages.properties</h4>
	  <a href="#" class="toggle">[toggle contents]</a>
      <code class="files"></code><br/>
      
      <h4>Messages_pt.properties</h4>
      <a href="#" class="toggle">[toggle contents]</a>
      <code class="files"></code><br/>
      
      <h4>Messages_pt_PT.properties</h4>
      <a href="#" class="toggle">[toggle contents]</a>
      <code class="files"></code><p/><p/><p/>
      
      
      <h3>Examples</h3>
      <div id="langBox">
	      Language:
	      <select id="lang">
			<option value="browser">Indicated by the browser</option>
			<option value="en">en</option>
			<option value="pt">pt</option>
			<option value="pt_PT" selected>pt_PT</option>
		  </select>
		  <span id="langBrowser"></span>
	  </div>
      
      <h4>Accessing values through the map</h4>
      <ul id="mapExamples"></ul>
      
      <h4>Accessing values through a JS variable</h4>
      <ul id="varExamples"></ul>
      
   </BODY>
</HTML>